<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表样式设置</title>
        <style>
           #none{list-style-type: none;}
           #square{list-style-type:square;}
           #decimal{list-style-type: decimal;}
           #upper-roman{list-style-type: upper-roman;}
           #image{list-style-type: none;}
           #image{list-style-image:url(jt.png);}

           .outside{list-style-position: outside;}
           .inside{list-style-position:inside;}
           .outside>li,.inside>li{border:1px solid #000;}

           .movie{list-style: none url(jt.png) inside;}

        </style>
    </head>
    <body>
        <ul id="none">
            <li>无符号列表项1</li>
            <li>无符号列表项2</li>
        </ul>
        <ul id="square">
            <li>小方块列表项1</li>
            <li>小方块列表项2</li>
        </ul>
        <ul id="decimal">
            <li>数字列表项1</li>
            <li>数字列表项2</li>
        </ul>
        <ul id="upper-roman">
            <li>大写罗马数字列表项1</li>
            <li>大写罗马数字列表项2</li>
        </ul>
        <ul id="image">
            <li>图像列表项1</li>
            <li>图像列表项2</li>
            <li>图像列表项3</li>
            <li>图像列表项4</li>
            <li>图像列表项5</li>
        </ul>

        <ul class="outside">
            <li>outside列表项1</li>
            <li>outside列表项2</li>
        </ul>
        <ul class="inside">
            <li>inside列表项1</li>
            <li>inside列表项2</li>
        </ul>

        <ul class="movie">
            <li>战狼</li>
            <li>长津湖</li>
            <li>流浪地球</li>
        </ul>

    </body>
</html>